<!DOCTYPE html>

<html lang="en">
<!-- 头部 -->
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>言叶之庭</title>
	<link rel="stylesheet" type="text/css" href="css/first.css">
</head>

	<!-- CSS 部分 -->
<!-- <style type="text/css"> -->

<!-- 

/*	body{
		margin: 0px;
	}*/
</style> -->

	<!-- HTML 部分 -->
<body style="margin:10px">
<div id="app">
	<!-- 标题 -->
	<div class="index">
		<a href="https://www.bilibili.com/bangumi/play/ep63669" target="_blank" class="watch title"> 言叶之庭在线观看</a>
		<p class="page watch">首页 </p>
	</div>
	<!-- 展示图 -->
	<div :class="picName" id="one"> <!--  onclick="threeFn()"  -->
		<!-- <div class = "station"></div> -->
		<!-- <div class="hand background1" id="course"> onmouseover="over(this)" onmouseleave="leave(this)"> -->
		<!-- <div :class="isColor" id="course" @mouseenter= "enter" @mouseleave ="leave"> -->
		<div class="hand background1" @click="changePic(1)">     <!-- onclick="threeFn()" -->
			<p>言叶之庭</p>
			<img src="imgs/add.png"></img>
		</div>
		<div class="hand background2" @click="changePic(2)">   
			<p>秒速五厘米</p>
			<img src="imgs/add.png"></img>
		</div>
		<div class="hand background3" @click="changePic(3)">
			<p>追繁星的孩子</p>
			<img src="imgs/add.png"></img>
		</div>
		<div class="hand background4" @click="changePic(4)">
			<p>你的名字</p>
			<img src="imgs/add.png"></img>
		</div>
		<div class="hand background5" @click="changePic(5)">
			<p>天气之子</p>
			<img src="imgs/add.png"></img>
		</div>
	</div>

	<!-- 百叶窗 -->
	<div>
		<ul style="padding:0;">
			<li :class="onePic">
				<div class="border zoom" style="float:right;" @click="changeImg(4)">
					<i>天气之子</i>
				</div>	
				<div class="border" style="float:right;" @click="changeImg(3)">
					<i>你的名字</i>
				</div>		
	
				<div class="border" style="float:right;" @click="changeImg(2)" >
					<i>追逐繁星的人</i>
				</div>			
				<div class="border" style="float:right;" @click="changeImg(1)">
					<i>秒速五厘厘米</i>
				</div>		
				<div class="border" style="float:left;" @click="changeImg(0)">				
					<i>言叶之庭</i>
				</div>
			</li>

			<li :class="twoPic">			
				<div class="border" style="float:right;" @click="changeImg(4)">
					<i>天气之子</i>
				</div>

				<div class="border" style="float:right;" @click="changeImg(3)">
					<i>你的名字</i>
				</div>				
				<div class="border" style="float:right;" @click="changeImg(2)">
					<i>追逐繁星的人</i>
				</div>	
				<div class="border" style="float:left;" @click="changeImg(0)">				
					<i>言叶之庭</i>
				</div>
				<div class="border" style="float:left;" @click="changeImg(1)">
					<i>秒速五厘厘米</i>
				</div>	
			</li>

			<li :class="threePic">
				<div class="border" style="float:right;" @click="changeImg(4)">
					<i>天气之子</i>
				</div>
				<div class="border" style="float:right;" @click="changeImg(3)">
					<i>你的名字</i>
				</div>				
				<div class="border" style="float:left;" @click="changeImg(0)">				
					<i>言叶之庭</i>
				</div>
				<div class="border" style="float:left;" @click="changeImg(1)">
					<i>秒速五厘厘米</i>
				</div>	
				<div class="border" style="float:left;" @click="changeImg(2)">
					<i>追逐繁星的人</i>
				</div>	
			</li>

			<li :class="fourPic">			

				<div class="border" style="float:right;" @click="changeImg(4)">
					<i>天气之子</i>
				</div>
				<div class="border" style="float:left;" @click="changeImg(0)">				
					<i>言叶之庭</i>
				</div>
				<div class="border" style="float:left;" @click="changeImg(1)">
					<i>秒速五厘厘米</i>
				</div>	
				<div class="border" style="float:left;" @click="changeImg(2)">
					<i>追逐繁星的人</i>
				</div>	
				<div class="border" style="float:left;" @click="changeImg(3)">
					<i>你的名字</i>
				</div>				

			</li>

			<li :class="fivePic">				
				<div class="border" style="float:left;" @click="changeImg(0)">
					<i>言叶之庭</i>
				</div>
				<div class="border" style="float:left;" @click="changeImg(1)">
					<i>秒速五厘厘米</i>
				</div>	
				<div class="border" style="float:left;" @click="changeImg(2)">
					<i>追逐繁星的人</i>
				</div>	
				<div class="border" style="float:left;" @click="changeImg(3)">
					<i>你的名字</i>
				</div>		
				<div class="border" style="float:left;" @click="changeImg(4)">
					<i>天气之子</i>
				</div>
			</li>
		</ul>
	</div>

	<!-- 介绍 -->
	<div class="introduce">
		<h1 class="intTitle">言叶之庭</h1>
		<p class="message">
			年方15岁的高中生秋月孝雄（入野自由 配音），专心学业的过程中不得不为了生计打工赚钱。<br/>母亲离家出走，他与哥哥过着看不到前方的生活。<br/>入梅之日，孝雄逃课来到日本庭园。在一座安静的小亭子里，27岁的职场女性雪野百香里（花泽香菜 配音）边吃巧克力边饮啤酒的样子引起了孝雄的注意。<br/>似曾相识的二人，每到落雨之日便从世俗的烦恼中逃脱出来，相会于这座钢筋铁骨都市丛林中宛若世外桃源的幽静角落。<br/>在梅雨季节的日子里，他们的心渐渐向彼此靠拢。<br/>志愿成为手工鞋匠的秋月，决心以雪野为模特做一双鞋。雨过天晴，艳阳高照，庭园中久久不见秋月和雪野的身影，相会无期亦有期
		</p>
	</div>

	<!-- 作者介绍 -->
	<div class="author">
		<img src="imgs/phone.png" class="head">
		<div class="">
			
		<h1 class="name">新海诚，原名新津诚</h1>
		<p class="message authorText">	人物对于新海诚的动画来说只是画面的一部分，他对背景的细致描绘已经达到了疯狂的地步。天空、光芒和倒影是他最喜欢的背景要素。在他的作品中，路边的水洼，地铁的金属扶手，在这些小小的范围内新海诚都用倒影创造出另一片天地。缤纷的色彩配上动人的细节，新海诚所创造的世界美得令人窒息</p>
		<button class="goto">点击前往百度百科</button>
		</div>
	</div>

	<!-- 二维码关注 -->
	<div class="content">
		<div>
			<h3>首页</h3>
			<p>Siki学院</p>
		</div>
		<div>
			<h3>邮箱</h3>
			<p>邮件联系</p>
		</div>
		<div>			
			<h3>关于Siki学院</h3>
			<p>Siki学院介绍</p>
		</div>
		<div>
			<img src="imgs/code.jpg">
			<h3 class="code">扫描二维码关注</h3>
		</div>
	</div>

	<!-- 备案号 -->
	<div>{{message}}</div>
</div>
</body>


	<!-- JS 部分 -->
<!-- <script src="js/jquery-2.1.4.min.js"></script> -->
<script src="js/vue.min.js"></script>
<script type="text/javascript">

	// vue 框架实现鼠标点击事件
	var vm = new Vue({
		el:"#app",
		data:{
			message:'hello world',       
			picName:'station',
			onePic:'onePic',
			twoPic:'twoPic',
			threePic:'threePic',
			fourPic:'fourPic',
			fivePic:'fivePic',
			one:'one',
		},

		methods:{
			// changePic1:function(){      // 这里的this指的应该就是引入vue框架的html元素
			// 	this.picName = 'station change';    // 这里可能就等同于 div.station
			// 	this.onePic = 'onePic changeBlock';
			// 	console.log("鼠标点击事件");
			// },
			changeImg:function(){    // 这个function可加可不加
				this.onePic ='onePic';
				this.threePic='threePic changeBlock'
			},
			// 如果按照这种思路来写，那么Pic和Img个需要写5个函数来完成任务，不可取

			changePic(e) {
				// console.log(typeof(e));
				this.picName = 'station change';
				if(e === 1){
					this.onePic = 'onePic changeBlock';
				}else if(e === 2){
					this.twoPic = 'twoPic changeBlock';
				}else if(e === 3){
					this.threePic = 'threePic changeBlock';
				}else if(e === 4){
					this.fourPic = 'fourPic changeBlock';
				}else{
					this.fivePic = 'fivePic changeBlock';
				}
			},

			changeImg(e) {
				this.onePic = 'onePic';
				this.twoPic = 'twoPic';
				this.threePic = 'threePic';
				this.fourPic = 'fourPic';
				this.fivePic = 'fivePic';
				if(e === 0){
					this.onePic = 'onePic changeBlock';
				}else if(e === 1){
					this.twoPic = 'twoPic changeBlock';
				}else if(e === 2){
					this.threePic = 'threePic changeBlock';
				}else if(e === 3){
					this.fourPic = 'fourPic changeBlock';
				}else{
					this.fivePic = 'fivePic changeBlock';
				}
			},

		}
	})




	// $(".background1").click(function(){        // 也是一种可行且简单的方式
	// 	$(".station").css("display","none");
	// });


// 实现鼠标点击事件  纯纯的js写法
	// function threeFn(){
	// 	document.getElementsByClassName("station")[0].style.display = "none";
	// 	//elemment.style.display = "none";
	// 	//alert("这是鼠标点击事件");
	// }



// 下面是实现背景切换时尝试的vue，jquery，等写法
	// function over(x){
	// 	x.style.background = "#658E56";
	// 	console.log("鼠标停留");
	// }
	// function leave(x){
	// 	x.style.background = 'url("imgs/bg.png")';
	// 	x.style.backgroundSize = "cover";
	// 	console.log("鼠标离开");
	// }

	// $(".background1").hover(
	// 	function(){
	//     $(".background1").css("background","#658E56");
	// 	},
	// 	function(){
	//     $(".background1").css("background","url('imgs/bg.png')");
	//     $(".background1").css("backgroundSize","cover");
	// 	}
		
	// 	// 或者这里也可以通过指定标签或者ID来进行设置，不一定是background1
	// );

	// var vm = new Vue({
	// 	el:"#app",
	// 	data:{
	// 		message:'hello world',
	// 		isColor: 'hand background1'
	// 	},
	// 	methods:{
	// 		enter:function(){
	// 			this.isColor = 'head green';			
	// 		},
	// 		leave:function(){
	// 			this.isColor = 'hand background1';
	// 		}
	// 	}
	// })


</script>

</html>



